@charset "utf-8";

/*从左往右*/

.fadeleft{

  animation: fadeleft 1s .5s ease forwards;

  -webkit-animation: fadeleft 1s ease .5s forwards;

  -moz-animation: fadeleft 1s ease .5s forwards;

}

@keyframes fadeleft {

  0% {

    opacity: 0;

    transform: translateX(-500px);

  }

  100% {

    opacity: 1;

    transform: translateX(0);

  }

}

@-webkit-keyframes fadeleft {

  0% {

    opacity: 0;

    -webkit-transform: translateX(-500px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateX(0);

  }

}

@-moz-keyframes fadeleft {

  0% {

    opacity: 0;

    -moz-transform: translateX(-500px);

  }

  100% {

    opacity: 1;

    -moz-transform: translateX(0);

  }

}

/*从右往左*/

.faderight{

  animation: faderight 1s .5s ease forwards;

  -webkit-animation: faderight 1s .5s ease forwards;

  -moz-animation: faderight 1s .5s ease forwards;

}





@keyframes faderight {

  0% {

    opacity: 0;

    transform: translateX(500px);

  }

  100% {

    opacity: 1;

    transform: translateX(0);

  }

}

@-webkit-keyframes faderight{

  0% {

    opacity: 0;

    -webkit-transform: translateX(500px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateX(0);

  }

}

@-moz-keyframes faderight {

  0% {

    opacity: 0;

    -moz-transform: translateX(500px);

  }

  100% {

    opacity: 1;

    -moz-transform: translateX(0);

  }

}



/*下方淡入*/

.p_fu {

  animation: fadeInUp 1s .5s ease both;

  -webkit-animation: fadeInUp 1s .5s ease both;

  -moz-animation: fadeInUp 1s .5s ease both;

}

@keyframes fadeInUp {

  0% {

    opacity: 0;

    transform: translateY(30px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

@-webkit-keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translateY(30px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

  }

}

@-moz-keyframes fadeInUp {

  0% {

    opacity: 0;

    -moz-transform: translateY(30px);

  }

  100% {

    opacity: 1;

    -moz-transform: translateY(0);

  }

}

/*上方淡入*/

.y_fd {

  -webkit-animation: fadeInDown 1s .2s ease both;

  -moz-animation: fadeInDown 1s .2s ease both;

  animation: fadeInDown 1s .2s ease both;

}

@-webkit-keyframes fadeInDown {

  0% {

    opacity: 0;

    -webkit-transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

  }

}

@-moz-keyframes fadeInDown {

  0% {

    opacity: 0;

    -moz-transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    -moz-transform: translateY(0);

  }

}

@keyframes fadeInDown {

  0% {

    opacity: 0;

    transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

/*摇摆*/

.shake {

  animation: shake 1s .2s ease both;

  -webkit-animation: shake 1s .2s ease both;

  -moz-animation: shake 1s .2s ease both;

}

@keyframes shake {

  0%,

  100% {

    transform: translateX(0);

  }

  10%,

  30%,

  50%,

  70%,

  90% {

    transform: translateX(-10px);

  }

  20%,

  40%,

  60%,

  80% {

    transform: translateX(10px);

  }

}

@-webkit-keyframes shake {

  0%,

  100% {

    -webkit-transform: translateX(0);

  }

  10%,

  30%,

  50%,

  70%,

  90% {

    -webkit-transform: translateX(-10px);

  }

  20%,

  40%,

  60%,

  80% {

    -webkit-transform: translateX(10px);

  }

}

@-moz-keyframes shake {

  0%,

  100% {

    -moz-transform: translateX(0);

  }

  10%,

  30%,

  50%,

  70%,

  90% {

    -moz-transform: translateX(-10px);

  }

  20%,

  40%,

  60%,

  80% {

    -moz-transform: translateX(10px);

  }

}



/*0915*/

.ani-view {

    animation: 1s forwards;

	-moz-animation: 1s forwards;

	-webkit-animation: 1s forwards;

}

@keyframes fadeInDown {

0% {

    opacity: 0;

    transform: translateY(20px);

}

100% {

    opacity: 1;

    transform: translateY(0px);

}

}

@-moz-keyframes fadeInDown {

0% {

    opacity: 0;

    -moz-transform: translateY(20px);

}

100% {

    opacity: 1;

    -moz-transform: translateY(0px);

}

}

@-webkit-keyframes fadeInDown {

0% {

    opacity: 0;

    -webkit-transform: translateY(20px);

}

100% {

    opacity: 1;

    -webkit-transform: translateY(0px);

}

}

.ani-view.fade-in-down {

    opacity: 0;

    transform: translateY(20px);

	-moz-transform: translateY(20px);

	-webkit-transform: translateY(20px);

}

.ani-view.fadeInDown {

    animation-name: fadeInDown;

	-moz-animation-name: fadeInDown;

	-webkit-animation-name: fadeInDown;

}

@keyframes fadeInLeft {

0% {

    opacity: 0;

    transform: translateX(-100px);

}

100% {

    opacity: 1;

    transform: translateX(0px);

}

}

@-moz-keyframes fadeInLeft {

0% {

    opacity: 0;

    -moz-transform: translateX(-100px);

}

100% {

    opacity: 1;

    -moz-transform: translateX(0px);

}

}

@-webkit-keyframes fadeInLeft {

0% {

    opacity: 0;

    -webkit-transform: translateX(-100px);

}

100% {

    opacity: 1;

    -webkit-transform: translateX(0px);

}

}

.ani-view.fade-in-left {

    opacity: 0;

    transform: translateX(-100px);

	-moz-transform: translateX(-100px);

	-webkit-transform: translateX(-100px);

}

.ani-view.fadeInLeft {

    animation-name: fadeInLeft;

	-moz-animation-name: fadeInLeft;

	-webkit-animation-name: fadeInLeft;

}

@keyframes fadeInRight {

0% {

    opacity: 0;

    transform: translateX(100px);

}

100% {

    opacity: 1;

    transform: translateX(0px);

}

}

@-moz-keyframes fadeInRight {

0% {

    opacity: 0;

    -moz-transform: translateX(100px);

}

100% {

    opacity: 1;

    -moz-transform: translateX(0px);

}

}

@-webkit-keyframes fadeInRight {

0% {

    opacity: 0;

    -webkit-transform: translateX(100px);

}

100% {

    opacity: 1;

    -webkit-transform: translateX(0px);

}

}

.ani-view.fade-in-right {

    opacity: 0;

    transform: translateX(100px);

	-moz-transform: translateX(100px);

	-webkit-transform: translateX(100px);

}

.ani-view.fadeInRight {

    animation-name: fadeInRight;

	-moz-animation-name: fadeInRight;

	-webkit-animation-name: fadeInRight;

}